<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img src="../img/4 (1).jpeg" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../img/4 (1).png" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../img/4 (2).jpeg" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../img/4 (3).jpeg" alt="" />
      </van-swipe-item>
    </van-swipe>

    <!-- 卡片 -->
    <van-card
      v-for="item in data"
      :thumb="item.url"
      :key="item.id"
      :desc="item.name"
      :title="item.title"
      :price="item.price"
      style="width: 184px;height: 150px;float: left;background: #ccc;
      margin-left: 2px;font-size: 12px;"
    />
    
  </div>
</template>

<script setup>
import axios from "axios";
import { ref } from "vue";

const data = ref([]);
const getData = async () => {
 const resp=await axios.get('/api/room/list')
  console.log(resp.data.data.list);
  data.value = resp.data.data.list;
};
getData();


</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
}
.my-swipe img {
  width: 100%;
  height: 200px;
}
</style>
